<template>
	<z-paging-swiper>
		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
		<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
		<template #top>
			<public-navbar :isBack="true">
				<view class="u-m-l-22">分配师傅</view>
			</public-navbar>
			<!-- <view class="tab-bar">
				<view :class="['item-tab', { active: isActiveTab(index) }]"
				v-for="(item, index) in tabList" :key="item.value" @tap="changeTab(index)">
					{{ item.label }}
				</view>
			</view> -->
			<z-tabs ref="tabs" :list="tabList" :current="tabIndex" @change="changeTab" class="tab-bar" active-color="#FC7404"></z-tabs>
		</template>

		<swiper style="height: 100%;" :current="tabIndex" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
			<swiper-item class="item-order">
				<view>
					<z-paging ref="masterList" v-model="dataList" @query="queryList">
						<!-- <template #bottom>
							<view class="safe-area-inset-bottom"></view>
						</template> -->
						<u-checkbox-group>
							<view class="master-item" v-for="(item, index) in dataList" :key="index">
								<view class="master-item-section">
									<u-checkbox :name="item.id" v-model="item.checked" active-color="#FD7403" shape="circle" :disabled="item.hasElected"></u-checkbox>
								</view>
								<view class="master-item-section">
									<image style="width: 120rpx; height: 120rpx; border-radius: 50%;" :src="item.thumbimg"/>
								</view>
								<view class="master-item-section" style="flex: 1;">
									<view class="master-item-nametag">
										<text>{{item.name}}</text>
										<text>{{item.craft}}</text>
									</view>
									<view class="master-item-distance">
										<text>距离目的地</text>
										<text style="color:#fd7403; margin-left: 10rpx;">{{item.distance}} km</text>
									</view>
								</view>
								<view class="master-item-section">
									<button class="master-operation-btn" @click="addMaster(item.id)">添加<text v-if="item.isNear">(N)</text></button>
								</view>
								<!-- <view class="master-item-section" v-else>
									<button class="master-operation-btn">删除</button>
								</view> -->
							</view>
						</u-checkbox-group>
					</z-paging>
					<public-fixed-box bottom>
						<view class="footer-Box">
							<view style="flex: 1;"><u-checkbox shape="circle" active-color="#FC7404" v-model="flagSelectAll" @click="">全选</u-checkbox></view>
							<view>
								<button class="fotter-Box-btn-primary" @click="submitAddResult">添加({{ addedMasterCount }})</button>
							</view>
						</view>
					</public-fixed-box>
				</view>
			</swiper-item>
			<swiper-item class="item-order">
				<view>
					<z-paging ref="electedList" v-model="electedList" @query="queryElectedList">
						<!-- <template #bottom>
							<view class="safe-area-inset-bottom"></view>
						</template> -->
						<u-checkbox-group>
							<view class="master-item" v-for="(item, index) in electedList" :key="index">
								<view class="master-item-section">
									<u-checkbox :name="item.id" v-model="item.checked" active-color="#FD7403" shape="circle"></u-checkbox>
								</view>
								<view class="master-item-section">
									<image style="width: 120rpx; height: 120rpx; border-radius: 50%;" :src="item.thumbimg"/>
								</view>
								<view class="master-item-section" style="flex: 1;">
									<view class="master-item-nametag">
										<text>{{item.name}}</text>
										<text>{{item.craft}}</text>
									</view>
									<view class="master-item-distance">
										<text>距离目的地</text>
										<text style="color:#fd7403; margin-left: 10rpx;">{{item.distance}} km</text>
									</view>
								</view>
								<view class="master-item-section">
									<button class="master-operation-btn-remove" @click="removeMaster(item.id)">删除</button>
								</view>
							</view>
						</u-checkbox-group>
					</z-paging>
					<public-fixed-box bottom>
						<view class="footer-Box">
							<view style="flex: 1;"><u-checkbox shape="circle" active-color="#FC7404" v-model="flagSelectAll" @click="">全选</u-checkbox></view>
							<view>
								<button class="fotter-Box-btn-primary" @click="submitRemoveResult">删除({{ removedMasterCount }})</button>
							</view>
						</view>
					</public-fixed-box>
				</view>
			</swiper-item>
		</swiper>
	</z-paging-swiper>

</template>

<script>
	// import { agentApi } from '@/common/agent.js';
	import configUrl from '@/utils/config.js';
	export default {
		data() {
			return {
				tabList: ["全部", "已分配"],
				tabIndex: 0,
				orderId: 0,
				addedMasterCount: 0,
				removedMasterCount: 0,
				flagSelectAll: true,
				selectedIds: [],
				dataList : [],
				electedList: [],
			}
		},
		onLoad(options) {
			this.orderId = options.orderId;
		},
		methods: {
			changeTab(index) {
				this.tabIndex = index;
				// this.$refs.paging.reload();
			},
			/**
			 * 查询所有可分配师傅列表
			 * @param {*} pageNo
			 * @param {*} pageSize
			 */
			queryList(pageNo, pageSize) {
				console.log(pageNo, pageSize);

				let sbumData = {};
				sbumData.page = pageNo;
				sbumData.tabIndex = this.tabIndex;
				sbumData.searchVal = this.searchVal;
				agentApi.getMasterList({orderId: this.orderId, page: pageNo}).then((res) => {
					res.forEach(element => {
						element.thumbimg = configUrl.appurlImg + element.thumbimg;
					});
					this.$refs.masterList.complete(res);
				});
			},
			/**
			 * 查询已分配师傅列表
			 * @param {*} pageNo
			 * @param {*} pageSize
			 */
			queryElectedList(pageNo, pageSize) {
				console.log(pageNo, pageSize);
				let sbumData = {};
				sbumData.page = pageNo;
				sbumData.tabIndex = this.tabIndex;
				sbumData.searchVal = this.searchVal;
				agentApi.getElectedMastersList({orderId: this.orderId, page: pageNo}).then((res) => {
					res.forEach(element => {
						element.thumbimg = configUrl.appurlImg + element.thumbimg;
					});
					this.$refs.electedList.complete(res);
				});
			},
			/**
			 * 添加师傅
			 */
			addMaster(mid) {
				this.addedMasterCount = 0;
				this.dataList.forEach(item => {
					if (mid == item.id && !item.hasElected) item.checked = !item.checked;
					if (item.checked && !item.hasElected) {
						this.addedMasterCount++;
					}
				});
			},
			/**
			 * 提交添加结果
			 */
			submitAddResult() {
				let selectedIds = [];
				this.dataList.forEach(item => {
					if (item.checked == true) {
						selectedIds.push(item.id);
					}
				});
				if (selectedIds.length == 0) return;
				let selectedMasters = selectedIds.join(",");
				agentApi.addMaster({orderId: this.orderId, chosen: selectedMasters}).then((res) => {
					uni.showToast({
						title: '添加成功',
						duration: 1000,
						icon: 'none'
					});
					uni.navigateBack();
				});
			},
			/**
			 * 从列表中移除指定的师傅
			 */
			removeMaster(mid) {
				this.removedMasterCount = 0;
				this.electedList.forEach(item => {
					if (mid == item.id) item.checked = !item.checked;
					if (item.checked) {
						this.removedMasterCount++;
					}
				});
			},
			/**
			 * 提交移除结果
			 */
			submitRemoveResult() {
				let selectedIds = [];
				this.electedList.forEach(item => {
					if (item.checked == true) {
						selectedIds.push(item.id);
					}
				});
				if (selectedIds.length == 0) return;
				let selectedMasters = selectedIds.join(",");
				agentApi.removeMaster({orderId: this.orderId, chosen: selectedMasters}).then((res) => {
					uni.showToast({
						title: '移除成功',
						duration: 1000,
						icon: 'none'
					});
					uni.navigateBack();
				});
			},
			// swiper滑动中
			swiperTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			// swiper滑动结束
			swiperAnimationfinish(e) {
				this.tabIndex = e.detail.current;
				this.$refs.tabs.unlockDx();
			}
		},
		computed: {
			// tabList() {
			// 	return [
			// 		{ label: "全部", value: 1 },
			// 		{ label: "已分配", value: 2 },
			// 	];
			// },
			isActiveTab() {
				return (index) => index === this.tabIndex;
			},
		}

	}
</script>

<style lang="scss" scoped>
.tab-bar {
  padding: 0 22rpx;
  display: flex;
  background-color: #fbfbfb;
  justify-content:space-around;
  .item-tab {
    padding: 0 36rpx;
    margin: 10rpx 0;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    // border-radius: 999px;
    & + .item-tab {
      margin-left: 16rpx;
    }
    &.active {
      color: #fd7403;
      font-size: 28rpx;
      font-weight: bold;
	  border-bottom: 5rpx solid #fd7403;
    }
  }
}

.master-item{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 20rpx 30rpx;
}

.master-item-section {
	display: flex;
	flex-direction: column;
	padding: 0 10rpx;
	height: 120rpx;
	justify-content: space-around;
}

.master-item-nametag {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.master-item-nametag>text:first-child {
	font-weight: bold;
	font-size: 32rpx;
}

.master-item-nametag>text:last-child {
	color: #fb7601;
	background-color: #ffefe2;
	padding: 10rpx;
	border-radius: 10rpx;
	margin-left: 20rpx;
	font-size: 24rpx;
}

.master-item-distance {
	display: flex;
	flex-direction: row;
	font-size: 24rpx;
	color: #999;
}

.master-operation-btn {
	background-color: #fd7403;
	color: #FFF;
	padding: 0 50rpx;
	font-size: 24rpx;
}

.master-operation-btn-remove {
	background-color: #f6f6f6;
	color: #666;
	padding: 0 50rpx;
	font-size: 24rpx;
}

.footer-Box {
	width: 100vw;
	height: 120rpx;
	border-radius: 10rpx;
	background-color: #FFF;
	display: flex;
	padding: 20rpx 40rpx 0 40rpx;
	margin-bottom: 20rpx;
	flex-direction: row;
	align-items: baseline;
	font-size: 22rpx;
	color: #999;
}
.fotter-Box-btn-primary {
	font-size: 28rpx;
	vertical-align: bottom;
	background-color: #fd7501;
	color: #fff;
	padding: 0 40rpx;
}


</style>
